<template>
    <div>

        <router-view></router-view>
        <van-tabbar v-model="active" @change="change">

            <van-tabbar-item  replace to="/">
                <template #icon="props">
                    <span class="iconfont" style="font-size: 25px">&#xe61b</span>
                </template>

                首页</van-tabbar-item>
            <van-tabbar-item  replace to="/category">
                <template #icon="props">
                    <span class="iconfont" style="font-size: 24px">&#xe601</span>
                </template>分类
            </van-tabbar-item>
            <van-tabbar-item  replace to="/message">
                <template #icon="props">
                    <span class="iconfont" style="font-size: 28px">&#xe606</span>
                </template>消息
            </van-tabbar-item>
            <van-tabbar-item badge="3" replace to="/my">
                <span>我的</span>
                <template #icon="props">
                    <img :src="props.active ? icon.active : icon.inactive" />
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>

    export default {
        name: "index",
        data(){
            return{
                active: 0,
                icon: {
                    active: 'https://img01.yzcdn.cn/vant/user-active.png',
                    inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
                },
            }
        },
        methods:{
            change(){
                console.log('1')
                console.log(this.active)
                sessionStorage.setItem('active',this.active)
            }
        },
        created() {
            console.log(2)
            this.active=sessionStorage.getItem('active')
            console.log(this.active)
        }

    }
</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    .index{
        margin-bottom: 50px;
    }
.message{
  line-height: 54px;

}
.message span {
    font-size: 30px;
}
    .lunbo{
        text-align: center;
    }
    .font{
        font-size: 12px;
        width: 100%;
    }
.font span{
    color: #FFC80B;
}
    .mean{
        text-align: center;
        margin-top: 20px;
    }
    .mean>div>div>div{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
        text-align: center;
        margin: 0 auto ;
    }

    .mean>div>div>div>div:nth-child(1){
        text-align: center;
        width: 40px;
        height: 40px;
        line-height: 40px;
        border-radius: 40px;
        background: red;
    }
.mean>div>div>div>div:nth-child(1)>span{
    font-size: 20px;

}
/*    秒杀*/
    .miaosha{
        text-align: left;
        margin: 20px 0 20px 0 ;
    }
    .miaosha>p{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        font-size: 12px;
        color:#99B5D7 ;
    }
    .miaosha>p>div{
        color: #FF6633;
        font-size: 20px;
    }
    .miaoshaList>div{
        margin-left: 20px;
        height: 155px;
        box-shadow: 0px 1px 2px gray;
    }

    .miaoshaList>div>p:nth-child(2){
        font-size: 13px;
        text-align: center;
        margin: 7px 0;
    }
    .miaoshaList>div>p:nth-child(3){
        color: #FF6633;
        text-align: center;
        font-size: 18px;

    }

</style>